<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>ReactionDrawer.js - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ArrayHelper.html">ArrayHelper</a><ul class='methods'><li data-type='method'><a href="ArrayHelper.html#.clone">clone</a></li><li data-type='method'><a href="ArrayHelper.html#.contains">contains</a></li><li data-type='method'><a href="ArrayHelper.html#.containsAll">containsAll</a></li><li data-type='method'><a href="ArrayHelper.html#.count">count</a></li><li data-type='method'><a href="ArrayHelper.html#.deepCopy">deepCopy</a></li><li data-type='method'><a href="ArrayHelper.html#.each">each</a></li><li data-type='method'><a href="ArrayHelper.html#.equals">equals</a></li><li data-type='method'><a href="ArrayHelper.html#.get">get</a></li><li data-type='method'><a href="ArrayHelper.html#.intersection">intersection</a></li><li data-type='method'><a href="ArrayHelper.html#.merge">merge</a></li><li data-type='method'><a href="ArrayHelper.html#.print">print</a></li><li data-type='method'><a href="ArrayHelper.html#.remove">remove</a></li><li data-type='method'><a href="ArrayHelper.html#.removeAll">removeAll</a></li><li data-type='method'><a href="ArrayHelper.html#.removeUnique">removeUnique</a></li><li data-type='method'><a href="ArrayHelper.html#.sortByAtomicNumberDesc">sortByAtomicNumberDesc</a></li><li data-type='method'><a href="ArrayHelper.html#.toggle">toggle</a></li><li data-type='method'><a href="ArrayHelper.html#.unique">unique</a></li></ul></li><li><a href="Atom.html">Atom</a><ul class='methods'><li data-type='method'><a href="Atom.html#addAnchoredRing">addAnchoredRing</a></li><li data-type='method'><a href="Atom.html#addNeighbouringElement">addNeighbouringElement</a></li><li data-type='method'><a href="Atom.html#attachPseudoElement">attachPseudoElement</a></li><li data-type='method'><a href="Atom.html#backupRings">backupRings</a></li><li data-type='method'><a href="Atom.html#getAtomicNumber">getAtomicNumber</a></li><li data-type='method'><a href="Atom.html#getAttachedPseudoElements">getAttachedPseudoElements</a></li><li data-type='method'><a href="Atom.html#getAttachedPseudoElementsCount">getAttachedPseudoElementsCount</a></li><li data-type='method'><a href="Atom.html#getMaxBonds">getMaxBonds</a></li><li data-type='method'><a href="Atom.html#getRingbondCount">getRingbondCount</a></li><li data-type='method'><a href="Atom.html#haveCommonRingbond">haveCommonRingbond</a></li><li data-type='method'><a href="Atom.html#isHeteroAtom">isHeteroAtom</a></li><li data-type='method'><a href="Atom.html#neighbouringElementsEqual">neighbouringElementsEqual</a></li><li data-type='method'><a href="Atom.html#restoreRings">restoreRings</a></li></ul></li><li><a href="CanvasWrapper.html">CanvasWrapper</a><ul class='methods'><li data-type='method'><a href="CanvasWrapper.html#clear">clear</a></li><li data-type='method'><a href="CanvasWrapper.html#drawAromaticityRing">drawAromaticityRing</a></li><li data-type='method'><a href="CanvasWrapper.html#drawBall">drawBall</a></li><li data-type='method'><a href="CanvasWrapper.html#drawCircle">drawCircle</a></li><li data-type='method'><a href="CanvasWrapper.html#drawDashedWedge">drawDashedWedge</a></li><li data-type='method'><a href="CanvasWrapper.html#drawDebugPoint">drawDebugPoint</a></li><li data-type='method'><a href="CanvasWrapper.html#drawDebugText">drawDebugText</a></li><li data-type='method'><a href="CanvasWrapper.html#drawLine">drawLine</a></li><li data-type='method'><a href="CanvasWrapper.html#drawPoint">drawPoint</a></li><li data-type='method'><a href="CanvasWrapper.html#drawText">drawText</a></li><li data-type='method'><a href="CanvasWrapper.html#drawWedge">drawWedge</a></li><li data-type='method'><a href="CanvasWrapper.html#getChargeText">getChargeText</a></li><li data-type='method'><a href="CanvasWrapper.html#getColor">getColor</a></li><li data-type='method'><a href="CanvasWrapper.html#reset">reset</a></li><li data-type='method'><a href="CanvasWrapper.html#scale">scale</a></li><li data-type='method'><a href="CanvasWrapper.html#setTheme">setTheme</a></li><li data-type='method'><a href="CanvasWrapper.html#updateSize">updateSize</a></li></ul></li><li><a href="Drawer.html">Drawer</a><ul class='methods'><li data-type='method'><a href="Drawer.html#draw">draw</a></li><li data-type='method'><a href="Drawer.html#getMolecularFormula">getMolecularFormula</a></li><li data-type='method'><a href="Drawer.html#getTotalOverlapScore">getTotalOverlapScore</a></li></ul></li><li><a href="DrawerBase.html">DrawerBase</a><ul class='methods'><li data-type='method'><a href="DrawerBase.html#addRing">addRing</a></li><li data-type='method'><a href="DrawerBase.html#addRingConnection">addRingConnection</a></li><li data-type='method'><a href="DrawerBase.html#annotateStereochemistry">annotateStereochemistry</a></li><li data-type='method'><a href="DrawerBase.html#areVerticesInSameRing">areVerticesInSameRing</a></li><li data-type='method'><a href="DrawerBase.html#backupRingInformation">backupRingInformation</a></li><li data-type='method'><a href="DrawerBase.html#chooseSide">chooseSide</a></li><li data-type='method'><a href="DrawerBase.html#createBridgedRing">createBridgedRing</a></li><li data-type='method'><a href="DrawerBase.html#createNextBond">createNextBond</a></li><li data-type='method'><a href="DrawerBase.html#createRing">createRing</a></li><li data-type='method'><a href="DrawerBase.html#draw">draw</a></li><li data-type='method'><a href="DrawerBase.html#drawEdge">drawEdge</a></li><li data-type='method'><a href="DrawerBase.html#drawEdges">drawEdges</a></li><li data-type='method'><a href="DrawerBase.html#drawVertices">drawVertices</a></li><li data-type='method'><a href="DrawerBase.html#edgeRingCount">edgeRingCount</a></li><li data-type='method'><a href="DrawerBase.html#getBridgedRingRings">getBridgedRingRings</a></li><li data-type='method'><a href="DrawerBase.html#getBridgedRings">getBridgedRings</a></li><li data-type='method'><a href="DrawerBase.html#getClosestVertex">getClosestVertex</a></li><li data-type='method'><a href="DrawerBase.html#getCommonRingbondNeighbour">getCommonRingbondNeighbour</a></li><li data-type='method'><a href="DrawerBase.html#getCommonRings">getCommonRings</a></li><li data-type='method'><a href="DrawerBase.html#getCurrentCenterOfMass">getCurrentCenterOfMass</a></li><li data-type='method'><a href="DrawerBase.html#getCurrentCenterOfMassInNeigbourhood">getCurrentCenterOfMassInNeigbourhood</a></li><li data-type='method'><a href="DrawerBase.html#getEdgeNormals">getEdgeNormals</a></li><li data-type='method'><a href="DrawerBase.html#getFusedRings">getFusedRings</a></li><li data-type='method'><a href="DrawerBase.html#getHeavyAtomCount">getHeavyAtomCount</a></li><li data-type='method'><a href="DrawerBase.html#getLargestOrAromaticCommonRing">getLargestOrAromaticCommonRing</a></li><li data-type='method'><a href="DrawerBase.html#getLastVertexWithAngle">getLastVertexWithAngle</a></li><li data-type='method'><a href="DrawerBase.html#getMolecularFormula">getMolecularFormula</a></li><li data-type='method'><a href="DrawerBase.html#getNonRingNeighbours">getNonRingNeighbours</a></li><li data-type='method'><a href="DrawerBase.html#getOverlapScore">getOverlapScore</a></li><li data-type='method'><a href="DrawerBase.html#getRing">getRing</a></li><li data-type='method'><a href="DrawerBase.html#getRingbondType">getRingbondType</a></li><li data-type='method'><a href="DrawerBase.html#getRingConnection">getRingConnection</a></li><li data-type='method'><a href="DrawerBase.html#getRingConnections">getRingConnections</a></li><li data-type='method'><a href="DrawerBase.html#getRingCount">getRingCount</a></li><li data-type='method'><a href="DrawerBase.html#getSpiros">getSpiros</a></li><li data-type='method'><a href="DrawerBase.html#getSubringCenter">getSubringCenter</a></li><li data-type='method'><a href="DrawerBase.html#getSubtreeOverlapScore">getSubtreeOverlapScore</a></li><li data-type='method'><a href="DrawerBase.html#getTotalOverlapScore">getTotalOverlapScore</a></li><li data-type='method'><a href="DrawerBase.html#getVerticesAt">getVerticesAt</a></li><li data-type='method'><a href="DrawerBase.html#hasBridgedRing">hasBridgedRing</a></li><li data-type='method'><a href="DrawerBase.html#initPseudoElements">initPseudoElements</a></li><li data-type='method'><a href="DrawerBase.html#initRings">initRings</a></li><li data-type='method'><a href="DrawerBase.html#isEdgeInRing">isEdgeInRing</a></li><li data-type='method'><a href="DrawerBase.html#isEdgeRotatable">isEdgeRotatable</a></li><li data-type='method'><a href="DrawerBase.html#isPartOfBridgedRing">isPartOfBridgedRing</a></li><li data-type='method'><a href="DrawerBase.html#isPointInRing">isPointInRing</a></li><li data-type='method'><a href="DrawerBase.html#isRingAromatic">isRingAromatic</a></li><li data-type='method'><a href="DrawerBase.html#position">position</a></li><li data-type='method'><a href="DrawerBase.html#printRingInfo">printRingInfo</a></li><li data-type='method'><a href="DrawerBase.html#removeRing">removeRing</a></li><li data-type='method'><a href="DrawerBase.html#removeRingConnection">removeRingConnection</a></li><li data-type='method'><a href="DrawerBase.html#removeRingConnectionsBetween">removeRingConnectionsBetween</a></li><li data-type='method'><a href="DrawerBase.html#resolvePrimaryOverlaps">resolvePrimaryOverlaps</a></li><li data-type='method'><a href="DrawerBase.html#resolveSecondaryOverlaps">resolveSecondaryOverlaps</a></li><li data-type='method'><a href="DrawerBase.html#restoreRingInformation">restoreRingInformation</a></li><li data-type='method'><a href="DrawerBase.html#rotateDrawing">rotateDrawing</a></li><li data-type='method'><a href="DrawerBase.html#rotateSubtree">rotateSubtree</a></li><li data-type='method'><a href="DrawerBase.html#setRingCenter">setRingCenter</a></li><li data-type='method'><a href="DrawerBase.html#visitStereochemistry">visitStereochemistry</a></li></ul></li><li><a href="Edge.html">Edge</a><ul class='methods'><li data-type='method'><a href="Edge.html#setBondType">setBondType</a></li></ul></li><li><a href="GaussDrawer.html">GaussDrawer</a><ul class='methods'><li data-type='method'><a href="GaussDrawer.html#draw">draw</a></li><li data-type='method'><a href="GaussDrawer.html#getImage">getImage</a></li><li data-type='method'><a href="GaussDrawer.html#getSVG">getSVG</a></li><li data-type='method'><a href="GaussDrawer.html#setPixel">setPixel</a></li></ul></li><li><a href="Graph.html">Graph</a><ul class='methods'><li data-type='method'><a href="Graph.html#._ccCountDfs">_ccCountDfs</a></li><li data-type='method'><a href="Graph.html#._ccGetDfs">_ccGetDfs</a></li><li data-type='method'><a href="Graph.html#.getConnectedComponentCount">getConnectedComponentCount</a></li><li data-type='method'><a href="Graph.html#.getConnectedComponents">getConnectedComponents</a></li><li data-type='method'><a href="Graph.html#_bridgeDfs">_bridgeDfs</a></li><li data-type='method'><a href="Graph.html#_init">_init</a></li><li data-type='method'><a href="Graph.html#addEdge">addEdge</a></li><li data-type='method'><a href="Graph.html#addVertex">addVertex</a></li><li data-type='method'><a href="Graph.html#clear">clear</a></li><li data-type='method'><a href="Graph.html#getAdjacencyList">getAdjacencyList</a></li><li data-type='method'><a href="Graph.html#getAdjacencyMatrix">getAdjacencyMatrix</a></li><li data-type='method'><a href="Graph.html#getBridges">getBridges</a></li><li data-type='method'><a href="Graph.html#getComponentsAdjacencyMatrix">getComponentsAdjacencyMatrix</a></li><li data-type='method'><a href="Graph.html#getDistanceMatrix">getDistanceMatrix</a></li><li data-type='method'><a href="Graph.html#getEdge">getEdge</a></li><li data-type='method'><a href="Graph.html#getEdgeList">getEdgeList</a></li><li data-type='method'><a href="Graph.html#getEdges">getEdges</a></li><li data-type='method'><a href="Graph.html#getSubgraphAdjacencyList">getSubgraphAdjacencyList</a></li><li data-type='method'><a href="Graph.html#getSubgraphAdjacencyMatrix">getSubgraphAdjacencyMatrix</a></li><li data-type='method'><a href="Graph.html#getSubgraphDistanceMatrix">getSubgraphDistanceMatrix</a></li><li data-type='method'><a href="Graph.html#getTreeDepth">getTreeDepth</a></li><li data-type='method'><a href="Graph.html#getVertexList">getVertexList</a></li><li data-type='method'><a href="Graph.html#hasEdge">hasEdge</a></li><li data-type='method'><a href="Graph.html#kkLayout">kkLayout</a></li><li data-type='method'><a href="Graph.html#traverseBF">traverseBF</a></li><li data-type='method'><a href="Graph.html#traverseTree">traverseTree</a></li></ul></li><li><a href="Line.html">Line</a><ul class='methods'><li data-type='method'><a href="Line.html#clone">clone</a></li><li data-type='method'><a href="Line.html#getAngle">getAngle</a></li><li data-type='method'><a href="Line.html#getLeftChiral">getLeftChiral</a></li><li data-type='method'><a href="Line.html#getLeftElement">getLeftElement</a></li><li data-type='method'><a href="Line.html#getLeftVector">getLeftVector</a></li><li data-type='method'><a href="Line.html#getLength">getLength</a></li><li data-type='method'><a href="Line.html#getRightChiral">getRightChiral</a></li><li data-type='method'><a href="Line.html#getRightElement">getRightElement</a></li><li data-type='method'><a href="Line.html#getRightVector">getRightVector</a></li><li data-type='method'><a href="Line.html#rotate">rotate</a></li><li data-type='method'><a href="Line.html#rotateToXAxis">rotateToXAxis</a></li><li data-type='method'><a href="Line.html#setLeftVector">setLeftVector</a></li><li data-type='method'><a href="Line.html#setRightVector">setRightVector</a></li><li data-type='method'><a href="Line.html#shorten">shorten</a></li><li data-type='method'><a href="Line.html#shortenFrom">shortenFrom</a></li><li data-type='method'><a href="Line.html#shortenLeft">shortenLeft</a></li><li data-type='method'><a href="Line.html#shortenRight">shortenRight</a></li><li data-type='method'><a href="Line.html#shortenTo">shortenTo</a></li></ul></li><li><a href="MathHelper.html">MathHelper</a><ul class='methods'><li data-type='method'><a href="MathHelper.html#.apothem">apothem</a></li><li data-type='method'><a href="MathHelper.html#.centralAngle">centralAngle</a></li><li data-type='method'><a href="MathHelper.html#.innerAngle">innerAngle</a></li><li data-type='method'><a href="MathHelper.html#.meanAngle">meanAngle</a></li><li data-type='method'><a href="MathHelper.html#.parityOfPermutation">parityOfPermutation</a></li><li data-type='method'><a href="MathHelper.html#.polyCircumradius">polyCircumradius</a></li><li data-type='method'><a href="MathHelper.html#.round">round</a></li><li data-type='method'><a href="MathHelper.html#.toDeg">toDeg</a></li><li data-type='method'><a href="MathHelper.html#.toRad">toRad</a></li></ul></li><li><a href="Reaction.html">Reaction</a></li><li><a href="ReactionDrawer.html">ReactionDrawer</a><ul class='methods'><li data-type='method'><a href="ReactionDrawer.html#draw">draw</a></li></ul></li><li><a href="Ring.html">Ring</a><ul class='methods'><li data-type='method'><a href="Ring.html#clone">clone</a></li><li data-type='method'><a href="Ring.html#contains">contains</a></li><li data-type='method'><a href="Ring.html#eachMember">eachMember</a></li><li data-type='method'><a href="Ring.html#getAngle">getAngle</a></li><li data-type='method'><a href="Ring.html#getDoubleBondCount">getDoubleBondCount</a></li><li data-type='method'><a href="Ring.html#getOrderedNeighbours">getOrderedNeighbours</a></li><li data-type='method'><a href="Ring.html#getPolygon">getPolygon</a></li><li data-type='method'><a href="Ring.html#getSize">getSize</a></li><li data-type='method'><a href="Ring.html#isBenzeneLike">isBenzeneLike</a></li></ul></li><li><a href="RingConnection.html">RingConnection</a><ul class='methods'><li data-type='method'><a href="RingConnection.html#.getNeighbours">getNeighbours</a></li><li data-type='method'><a href="RingConnection.html#.getVertices">getVertices</a></li><li data-type='method'><a href="RingConnection.html#.isBridge">isBridge</a></li><li data-type='method'><a href="RingConnection.html#addVertex">addVertex</a></li><li data-type='method'><a href="RingConnection.html#containsRing">containsRing</a></li><li data-type='method'><a href="RingConnection.html#isBridge">isBridge</a></li><li data-type='method'><a href="RingConnection.html#updateOther">updateOther</a></li></ul></li><li><a href="SSSR.html">SSSR</a><ul class='methods'><li data-type='method'><a href="SSSR.html#.areSetsEqual">areSetsEqual</a></li><li data-type='method'><a href="SSSR.html#.bondsToAtoms">bondsToAtoms</a></li><li data-type='method'><a href="SSSR.html#.getBondCount">getBondCount</a></li><li data-type='method'><a href="SSSR.html#.getEdgeCount">getEdgeCount</a></li><li data-type='method'><a href="SSSR.html#.getEdgeList">getEdgeList</a></li><li data-type='method'><a href="SSSR.html#.getPathIncludedDistanceMatrices">getPathIncludedDistanceMatrices</a></li><li data-type='method'><a href="SSSR.html#.getRingCandidates">getRingCandidates</a></li><li data-type='method'><a href="SSSR.html#.getRings">getRings</a></li><li data-type='method'><a href="SSSR.html#.getSSSR">getSSSR</a></li><li data-type='method'><a href="SSSR.html#.isSupersetOf">isSupersetOf</a></li><li data-type='method'><a href="SSSR.html#.matrixToString">matrixToString</a></li><li data-type='method'><a href="SSSR.html#.pathSetsContain">pathSetsContain</a></li></ul></li><li><a href="Vector2.html">Vector2</a><ul class='methods'><li data-type='method'><a href="Vector2.html#add">add</a></li><li data-type='method'><a href="Vector2.html#angle">angle</a></li><li data-type='method'><a href="Vector2.html#clockwise">clockwise</a></li><li data-type='method'><a href="Vector2.html#clone">clone</a></li><li data-type='method'><a href="Vector2.html#distance">distance</a></li><li data-type='method'><a href="Vector2.html#distanceSq">distanceSq</a></li><li data-type='method'><a href="Vector2.html#divide">divide</a></li><li data-type='method'><a href="Vector2.html#getRotateAwayFromAngle">getRotateAwayFromAngle</a></li><li data-type='method'><a href="Vector2.html#getRotateToAngle">getRotateToAngle</a></li><li data-type='method'><a href="Vector2.html#getRotateTowardsAngle">getRotateTowardsAngle</a></li><li data-type='method'><a href="Vector2.html#invert">invert</a></li><li data-type='method'><a href="Vector2.html#isInPolygon">isInPolygon</a></li><li data-type='method'><a href="Vector2.html#length">length</a></li><li data-type='method'><a href="Vector2.html#lengthSq">lengthSq</a></li><li data-type='method'><a href="Vector2.html#multiply">multiply</a></li><li data-type='method'><a href="Vector2.html#multiplyScalar">multiplyScalar</a></li><li data-type='method'><a href="Vector2.html#normalize">normalize</a></li><li data-type='method'><a href="Vector2.html#normalized">normalized</a></li><li data-type='method'><a href="Vector2.html#relativeClockwise">relativeClockwise</a></li><li data-type='method'><a href="Vector2.html#rotate">rotate</a></li><li data-type='method'><a href="Vector2.html#rotateAround">rotateAround</a></li><li data-type='method'><a href="Vector2.html#rotateAwayFrom">rotateAwayFrom</a></li><li data-type='method'><a href="Vector2.html#rotateTo">rotateTo</a></li><li data-type='method'><a href="Vector2.html#sameSideAs">sameSideAs</a></li><li data-type='method'><a href="Vector2.html#subtract">subtract</a></li><li data-type='method'><a href="Vector2.html#toString">toString</a></li><li data-type='method'><a href="Vector2.html#whichSide">whichSide</a></li><li data-type='method'><a href="Vector2.html#.add">add</a></li><li data-type='method'><a href="Vector2.html#.angle">angle</a></li><li data-type='method'><a href="Vector2.html#.averageDirection">averageDirection</a></li><li data-type='method'><a href="Vector2.html#.divide">divide</a></li><li data-type='method'><a href="Vector2.html#.divideScalar">divideScalar</a></li><li data-type='method'><a href="Vector2.html#.dot">dot</a></li><li data-type='method'><a href="Vector2.html#.midpoint">midpoint</a></li><li data-type='method'><a href="Vector2.html#.multiply">multiply</a></li><li data-type='method'><a href="Vector2.html#.multiplyScalar">multiplyScalar</a></li><li data-type='method'><a href="Vector2.html#.normals">normals</a></li><li data-type='method'><a href="Vector2.html#.scalarProjection">scalarProjection</a></li><li data-type='method'><a href="Vector2.html#.subtract">subtract</a></li><li data-type='method'><a href="Vector2.html#.threePointangle">threePointangle</a></li><li data-type='method'><a href="Vector2.html#.units">units</a></li></ul></li><li><a href="Vertex.html">Vertex</a><ul class='methods'><li data-type='method'><a href="Vertex.html#addChild">addChild</a></li><li data-type='method'><a href="Vertex.html#addRingbondChild">addRingbondChild</a></li><li data-type='method'><a href="Vertex.html#clone">clone</a></li><li data-type='method'><a href="Vertex.html#equals">equals</a></li><li data-type='method'><a href="Vertex.html#getAngle">getAngle</a></li><li data-type='method'><a href="Vertex.html#getDrawnNeighbours">getDrawnNeighbours</a></li><li data-type='method'><a href="Vertex.html#getNeighbourCount">getNeighbourCount</a></li><li data-type='method'><a href="Vertex.html#getNeighbours">getNeighbours</a></li><li data-type='method'><a href="Vertex.html#getNextInRing">getNextInRing</a></li><li data-type='method'><a href="Vertex.html#getSpanningTreeNeighbours">getSpanningTreeNeighbours</a></li><li data-type='method'><a href="Vertex.html#getTextDirection">getTextDirection</a></li><li data-type='method'><a href="Vertex.html#isTerminal">isTerminal</a></li><li data-type='method'><a href="Vertex.html#setParentVertexId">setParentVertexId</a></li><li data-type='method'><a href="Vertex.html#setPosition">setPosition</a></li><li data-type='method'><a href="Vertex.html#setPositionFromVector">setPositionFromVector</a></li></ul></li></ul><h3>Global</h3><ul><li><a href="global.html#getChargeText">getChargeText</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">ReactionDrawer.js</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>const SvgDrawer = require('./SvgDrawer');
const SvgWrapper = require('./SvgWrapper');
const Options = require('./Options');
const ThemeManager = require('./ThemeManager');
const formulaToCommonName = require('./FormulaToCommonName');

class ReactionDrawer {
    /**
     * The constructor for the class ReactionDrawer.
     *
     * @param {Object} options An object containing reaction drawing specitic options.
     * @param {Object} moleculeOptions An object containing molecule drawing specific options.
     */
    constructor(options, moleculeOptions) {
        this.defaultOptions = {
            scale: moleculeOptions.scale > 0.0 ? moleculeOptions.scale : 1.0,
            fontSize: moleculeOptions.fontSizeLarge * 0.8,
            fontFamily: 'Arial, Helvetica, sans-serif',
            spacing: 10,
            plus: {
                size: 9,
                thickness: 1.0
            },
            arrow: {
                length: moleculeOptions.bondLength * 4.0,
                headSize: 6.0,
                thickness: 1.0,
                margin: 3
            },
            weights: {
                normalize: false
            }
        }

        this.opts = Options.extend(true, this.defaultOptions, options);

        this.drawer = new SvgDrawer(moleculeOptions);
        this.molOpts = this.drawer.opts;
    }

    /**
   * Draws the parsed reaction smiles data to a canvas element.
   *
   * @param {Object} reaction The reaction object returned by the reaction smiles parser.
   * @param {(String|SVGElement)} target The id of the HTML canvas element the structure is drawn to - or the element itself.
   * @param {String} themeName='dark' The name of the theme to use. Built-in themes are 'light' and 'dark'.
   * @param {?Object} weights=null The weights for reactants, agents, and products.
   * @param {String} textAbove='{reagents}' The text above the arrow.
   * @param {String} textBelow='' The text below the arrow.
   * @param {?Object} weights=null The weights for reactants, agents, and products.
   * @param {Boolean} infoOnly=false Only output info on the molecule without drawing anything to the canvas.
   * 
   * @returns {SVGElement} The svg element
   */
    draw(reaction, target, themeName = 'light', weights = null, textAbove = '{reagents}', textBelow = '', infoOnly = false) {
        this.themeManager = new ThemeManager(this.molOpts.themes, themeName);

        // Normalize the weights over the reaction molecules
        if (this.opts.weights.normalize) {
            let max = -Number.MAX_SAFE_INTEGER;
            let min = Number.MAX_SAFE_INTEGER;

            if (weights.hasOwnProperty('reactants')) {
                for (let i = 0; i &lt; weights.reactants.length; i++) {
                    for (let j = 0; j &lt; weights.reactants[i].length; j++) {
                        if (weights.reactants[i][j] &lt; min) {
                            min = weights.reactants[i][j];
                        }
                        if (weights.reactants[i][j] > max) {
                            max = weights.reactants[i][j];
                        }
                    }
                }
            }

            if (weights.hasOwnProperty('reagents')) {
                for (let i = 0; i &lt; weights.reagents.length; i++) {
                    for (let j = 0; j &lt; weights.reagents[i].length; j++) {
                        if (weights.reagents[i][j] &lt; min) {
                            min = weights.reagents[i][j];
                        }
                        if (weights.reagents[i][j] > max) {
                            max = weights.reagents[i][j];
                        }
                    }
                }
            }

            if (weights.hasOwnProperty('products')) {
                for (let i = 0; i &lt; weights.products.length; i++) {
                    for (let j = 0; j &lt; weights.products[i].length; j++) {
                        if (weights.products[i][j] &lt; min) {
                            min = weights.products[i][j];
                        }
                        if (weights.products[i][j] > max) {
                            max = weights.products[i][j];
                        }
                    }
                }
            }

            let abs_max = Math.max(Math.abs(min), Math.abs(max));

            if (weights.hasOwnProperty('reactants')) {
                for (let i = 0; i &lt; weights.reactants.length; i++) {
                    for (let j = 0; j &lt; weights.reactants[i].length; j++) {
                        weights.reactants[i][j] /= abs_max;
                    }
                }
            }

            if (weights.hasOwnProperty('reagents')) {
                for (let i = 0; i &lt; weights.reagents.length; i++) {
                    for (let j = 0; j &lt; weights.reagents[i].length; j++) {
                        weights.reagents[i][j] /= abs_max;
                    }
                }
            }

            if (weights.hasOwnProperty('products')) {
                for (let i = 0; i &lt; weights.products.length; i++) {
                    for (let j = 0; j &lt; weights.products[i].length; j++) {
                        weights.products[i][j] /= abs_max;
                    }
                }
            }
        }

        let svg = null;

        if (target === null || target === 'svg') {
            svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            svg.setAttributeNS(null, 'width', 500 + '');
            svg.setAttributeNS(null, 'height', 500 + '');
        } else if (typeof target === 'string' || target instanceof String) {
            svg = document.getElementById(target);
        } else {
            svg = target;
        }

        while (svg.firstChild) {
            svg.removeChild(svg.firstChild);
        }

        let elements = [];

        let maxHeight = 0.0

        // Reactants
        for (var i = 0; i &lt; reaction.reactants.length; i++) {
            if (i > 0) {
                elements.push({
                    width: this.opts.plus.size * this.opts.scale,
                    height: this.opts.plus.size * this.opts.scale,
                    svg: this.getPlus()
                });
            }

            let reactantWeights = null;
            if (weights &amp;&amp; weights.hasOwnProperty('reactants') &amp;&amp; weights.reactants.length > i) {
                reactantWeights = weights.reactants[i];
            }

            let reactantSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

            this.drawer.draw(reaction.reactants[i], reactantSvg, themeName, reactantWeights, infoOnly, [], this.opts.weights.normalize);

            let element = {
                width: reactantSvg.viewBox.baseVal.width * this.opts.scale,
                height: reactantSvg.viewBox.baseVal.height * this.opts.scale,
                svg: reactantSvg
            };

            elements.push(element);

            if (element.height > maxHeight) {
                maxHeight = element.height;
            }
        }

        // Arrow
        elements.push({
            width: this.opts.arrow.length * this.opts.scale,
            height: this.opts.arrow.headSize * 2.0 * this.opts.scale,
            svg: this.getArrow()
        });

        // Text above the arrow / reagents
        let reagentsText = "";
        for (var i = 0; i &lt; reaction.reagents.length; i++) {
            if (i > 0) {
                reagentsText += ", "
            }

            let text = this.drawer.getMolecularFormula(reaction.reagents[i]);
            if (text in formulaToCommonName) {
                text = formulaToCommonName[text];
            }

            reagentsText += SvgWrapper.replaceNumbersWithSubscript(text);
        }

        textAbove = textAbove.replace('{reagents}', reagentsText);

        const topText = SvgWrapper.writeText(
            textAbove,
            this.themeManager,
            this.opts.fontSize * this.opts.scale,
            this.opts.fontFamily,
            this.opts.arrow.length * this.opts.scale
        );

        let centerOffsetX = (this.opts.arrow.length * this.opts.scale - topText.width) / 2.0;

        elements.push({
            svg: topText.svg,
            height: topText.height,
            width: this.opts.arrow.length * this.opts.scale,
            offsetX: -(this.opts.arrow.length * this.opts.scale + this.opts.spacing) + centerOffsetX,
            offsetY: -(topText.height / 2.0) - this.opts.arrow.margin,
            position: 'relative'
        });

        // Text below arrow
        const bottomText = SvgWrapper.writeText(
            textBelow,
            this.themeManager,
            this.opts.fontSize * this.opts.scale,
            this.opts.fontFamily,
            this.opts.arrow.length * this.opts.scale
        );

        centerOffsetX = (this.opts.arrow.length * this.opts.scale - bottomText.width) / 2.0;

        elements.push({
            svg: bottomText.svg,
            height: bottomText.height,
            width: this.opts.arrow.length * this.opts.scale,
            offsetX: -(this.opts.arrow.length * this.opts.scale + this.opts.spacing) + centerOffsetX,
            offsetY: bottomText.height / 2.0 + this.opts.arrow.margin,
            position: 'relative'
        });

        // Products
        for (var i = 0; i &lt; reaction.products.length; i++) {
            if (i > 0) {
                elements.push({
                    width: this.opts.plus.size * this.opts.scale,
                    height: this.opts.plus.size * this.opts.scale,
                    svg: this.getPlus()
                });
            }

            let productWeights = null;
            if (weights &amp;&amp; weights.hasOwnProperty('products') &amp;&amp; weights.products.length > i) {
                productWeights = weights.products[i];
            }

            let productSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

            this.drawer.draw(reaction.products[i], productSvg, themeName, productWeights, infoOnly, [], this.opts.weights.normalize);

            let element = {
                width: productSvg.viewBox.baseVal.width * this.opts.scale,
                height: productSvg.viewBox.baseVal.height * this.opts.scale,
                svg: productSvg
            };

            elements.push(element);

            if (element.height > maxHeight) {
                maxHeight = element.height;
            }
        }

        let totalWidth = 0.0;

        elements.forEach(element => {
            let offsetX = element.offsetX ?? 0.0;
            let offsetY = element.offsetY ?? 0.0;

            element.svg.setAttributeNS(null, 'x', Math.round(totalWidth + offsetX));
            element.svg.setAttributeNS(null, 'y', Math.round(((maxHeight - element.height) / 2.0) + offsetY));
            element.svg.setAttributeNS(null, 'width', Math.round(element.width));
            element.svg.setAttributeNS(null, 'height', Math.round(element.height));
            svg.appendChild(element.svg);

            if (element.position !== 'relative') {
                totalWidth += Math.round(element.width + this.opts.spacing + offsetX);
            }
        });

        svg.setAttributeNS(null, 'viewBox', `0 0 ${totalWidth} ${maxHeight}`);
        svg.style.width = totalWidth + 'px';
        svg.style.height = maxHeight + 'px';

        return svg;
    }

    getPlus() {
        let s = this.opts.plus.size;
        let w = this.opts.plus.thickness;
        let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        let rect_h = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        let rect_v = document.createElementNS('http://www.w3.org/2000/svg', 'rect');

        svg.setAttributeNS(null, 'id', 'plus');

        rect_h.setAttributeNS(null, 'x', 0);
        rect_h.setAttributeNS(null, 'y', s / 2.0 - w / 2.0);
        rect_h.setAttributeNS(null, 'width', s);
        rect_h.setAttributeNS(null, 'height', w);
        rect_h.setAttributeNS(null, 'fill', this.themeManager.getColor("C"));

        rect_v.setAttributeNS(null, 'x', s / 2.0 - w / 2.0);
        rect_v.setAttributeNS(null, 'y', 0);
        rect_v.setAttributeNS(null, 'width', w);
        rect_v.setAttributeNS(null, 'height', s);
        rect_v.setAttributeNS(null, 'fill', this.themeManager.getColor("C"));

        svg.appendChild(rect_h);
        svg.appendChild(rect_v);
        svg.setAttributeNS(null, 'viewBox', `0 0 ${s} ${s}`);

        return svg;
    }

    getArrowhead() {
        let s = this.opts.arrow.headSize;
        let marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
        let polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');

        marker.setAttributeNS(null, 'id', 'arrowhead');
        marker.setAttributeNS(null, 'viewBox', `0 0 ${s} ${s}`);
        marker.setAttributeNS(null, 'markerUnits', 'userSpaceOnUse');
        marker.setAttributeNS(null, 'markerWidth', s);
        marker.setAttributeNS(null, 'markerHeight', s);
        marker.setAttributeNS(null, 'refX', 0);
        marker.setAttributeNS(null, 'refY', s / 2);
        marker.setAttributeNS(null, 'orient', 'auto');
        marker.setAttributeNS(null, 'fill', this.themeManager.getColor("C"));

        polygon.setAttributeNS(null, 'points', `0 0, ${s} ${s / 2}, 0 ${s}`)

        marker.appendChild(polygon);

        return marker;
    }

    getCDArrowhead() {
        let s = this.opts.arrow.headSize;
        let sw = s * (7 / 4.5);
        let marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
        let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

        marker.setAttributeNS(null, 'id', 'arrowhead');
        marker.setAttributeNS(null, 'viewBox', `0 0 ${sw} ${s}`);
        marker.setAttributeNS(null, 'markerUnits', 'userSpaceOnUse');
        marker.setAttributeNS(null, 'markerWidth', sw * 2);
        marker.setAttributeNS(null, 'markerHeight', s * 2);
        marker.setAttributeNS(null, 'refX', 2.2);
        marker.setAttributeNS(null, 'refY', 2.2);
        marker.setAttributeNS(null, 'orient', 'auto');
        marker.setAttributeNS(null, 'fill', this.themeManager.getColor("C"));

        path.setAttributeNS(null, 'style', 'fill-rule:nonzero;');
        path.setAttributeNS(null, 'd', 'm 0 0 l 7 2.25 l -7 2.25 c 0 0 0.735 -1.084 0.735 -2.28 c 0 -1.196 -0.735 -2.22 -0.735 -2.22 z');

        marker.appendChild(path);

        return marker;
    }

    getArrow() {
        let s = this.opts.arrow.headSize;
        let l = this.opts.arrow.length;

        let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        let defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        let line = document.createElementNS('http://www.w3.org/2000/svg', 'line');

        defs.appendChild(this.getCDArrowhead());
        svg.appendChild(defs);

        svg.setAttributeNS(null, 'id', 'arrow');

        line.setAttributeNS(null, 'x1', 0.0);
        line.setAttributeNS(null, 'y1', -this.opts.arrow.thickness / 2.0);
        line.setAttributeNS(null, 'x2', l);
        line.setAttributeNS(null, 'y2', -this.opts.arrow.thickness / 2.0);
        line.setAttributeNS(null, 'stroke-width', this.opts.arrow.thickness);
        line.setAttributeNS(null, 'stroke', this.themeManager.getColor("C"));
        line.setAttributeNS(null, 'marker-end', 'url(#arrowhead)');

        svg.appendChild(line);
        svg.setAttributeNS(null, 'viewBox', `0 ${-s / 2.0} ${l + s * (7 / 4.5)} ${s}`);

        return svg;
    }
}

module.exports = ReactionDrawer;
</code></pre>
        </article>
    </section>




    
    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a> on Mon Dec 12 2022 22:02:41 GMT+0100 (Central European Standard Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>



</body>
</html>
